<template>
  <div class="config-container">
    <!-- 导航栏 -->
    <div class="tab-bar">
      <el-button 
        v-for="tab in tabs"
        :key="tab.key"
        @click="selectConfig(tab.key)"
        :class="{ 'active': selectedTab === tab.key }"
      >
        {{ tab.title }}
      </el-button>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <component :is="configbody" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import CloseConfig from './config/CloseConfig.vue';//  // 引入闭环配置组件
import Log from './config/Log.vue';//  // 引入日志组件
import RoleConfig from './config/RoleConfig.vue';//  // 引入角色配置组件
import SourceConfig from './config/SourceConfig.vue';//  // 引入配置组件

const tabs = [
    { key: 'bhdy', title: '闭环定义' },
    { key: 'jsgl', title: '角色管理' },
    { key: 'sjypz', title: '数据源配置' },
    { key: 'log', title: '登录日志' },
  ];
  // 当前选中的标签
  const selectedTab = ref('bhdy');

   // 根据标签选择对应的组件
   const configbody = computed(() => {
    switch (selectedTab.value) {
      case 'bhdy': return CloseConfig;
      case 'jsgl': return RoleConfig;
      case 'sjypz': return SourceConfig;
      case 'log': return Log;
      default: return CloseConfig;
    }
  });
  
  // 切换标签的方法
  const selectConfig = (key) => {
    selectedTab.value = key;
  };
</script>

<style scoped>
  .config-container {
    padding: 20px;
  }
  
  .tab-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .tab-bar .el-button {
    padding: 12px 20px;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .tab-bar .el-button.active {
    background-color: #409EFF;
    color: white;
    border-color: #409EFF;
  }
  
  .content {
    padding: 20px;
    background-color: white;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }
  </style>